<template>
  <view class="ZZY">
    <view v-if="ZZYClassList.length > 0" style="margin-bottom: 80rpx">
      <view class="cu-card" v-for="item in ZZYClassList" :key="item.CLASS_ID">
        <view class="cu-item shadow padding card-item" style="margin-top: 20rpx;margin-bottom: 10rpx;">
          <view class="cu-tag bg-green sm" v-if="item.SH_FLAG == '1'">需审核</view>
          <view class="cu-list menu">
            <view class="cu-item">
              <!--                <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>-->
              <view class="content flex-sub">
                <view class="text-black text-bold">{{ item.CLASSNAME }}</view>
                <view class="text-gray text-sm flex">
                  <text>专业： {{item.MAJOR_NAME}}</text>
                </view>
                <view class="text-gray text-sm flex">
                  <text>开课时间： {{item.S_KK_DATE}}</text>
                </view>

                <view class="text-gray text-sm flex">
                  <text>上课时间： {{ item.SKSJSNR}}</text>
                </view>

                <view class="text-gray text-sm flex margin-tb-xs">
                  <view class="cu-tag radius bg-red light" style="position: relative;margin-left: 0">{{ item.DSZ_FLAGNR }}</view>
                </view>

              </view>
            </view>

            <view class="cu-item">
              <view class="flex flex-direction text-red text-df">
                <view class="text-price">{{ getPrice(+item.SFJE1,false) }}<text class="text-sm margin-left-xs text-gray">低于50周岁</text></view>
                <view class="text-price">{{ getPrice(+item.SFJE2,false) }}<text class="text-sm margin-left-xs text-gray">50周岁（含）以上</text></view>
              </view>
<!--              <template v-if="ROLE_ID === 4">-->
<!--                <button v-if="!isSelectOther" class="cu-btn bg-blue round shadow" @tap="toEnroll(item.CLASS_ID)">立即报名</button>-->
<!--                <checkbox-group @change="onCheckChange" v-else :data-id="item.CLASS_ID">-->
<!--                  <checkbox class="round blue" :value="item.CLASS_ID" :checked="selectedIds.includes(item.CLASS_ID)"></checkbox>-->
<!--                </checkbox-group>-->
<!--              </template>-->
              <button class="cu-btn bg-blue round shadow" @tap="applyZZYTo(item.CLASS_ID + '')">转至该班</button>

            </view>
          </view>
        </view>
      </view>
      <load-more :status="loadStatus"/>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {onLoad} from "@dcloudio/uni-app";
import {usePagination} from "../../utils/usePagination";
import {useZZYClassList} from "./useZZYClassList";
import {usePrice} from "../../utils/usePrice";
import LoadMore from '../../components/loadmore/index.vue'
import {ref, watchEffect} from "vue";
import {doApplyZZY} from "../../api/enroll";
import {useStore} from "vuex";

const {total,initZZYClassList,ZZYClassList} = useZZYClassList()
const pageSize = 20
const {page,loadStatus} = usePagination({
  page: 1,
  pageSize,
  onPageChange: initZZYClassList,
  startReachBottom: true
})

watchEffect(() => {
  loadStatus.value = total.value <= pageSize ? 'over' : 'loadmore'
})

const {getPrice} = usePrice()
const {state} = useStore()
const CBM_ID = ref('')
function applyZZYTo(CLASS_ID: string){
  uni.showModal({
    title: '提示',
    content: '是否确认转至该班级？',
    success: async ({confirm}) => {
      if (confirm){
        try {
          const res = await doApplyZZY({
            CLASS_ID,
            CBM_ID: CBM_ID.value,
            OPERATOR_ID: state.user.userInfo.CUSER_ID
          })

          if (res.ERROR[0].errcode == '0'){
            uni.$emit('ZZYFinish')
            uni.showToast({
              title: '申请成功',
              icon: 'success',
              mask: true,
              success: () => {
                setTimeout(() => {
                  uni.navigateBack()
                },500)
              }
            })
          }else {
            uni.showToast({
              title: res.ERROR[0].error,
              icon: 'none',
              mask: true
            })
          }
        }catch (err){
          uni.showToast({
            title: '申请失败',
            icon: 'error',
            mask: true
          })
        }

      }
    }
  })

}

onLoad(async (options: any) => {
  if (options.CBM_ID){
    CBM_ID.value = options.CBM_ID
  }else {
    uni.showToast({
      title: '选班异常，请重试',
      icon: 'none',
      mask: true,
      success: () => {
        setTimeout(() => {
          uni.navigateBack()
        },500)
      }
    })
  }
})
</script>

<style scoped lang="scss">
.ZZY{

  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

  .card-item{
    position: relative;
    .cu-tag{
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
}
</style>
